// 订单列表
export const orderList = (editor) => {
  const {
    Components
  } = editor;
  Components.addType('orderList', {
    model: {
      defaults: {
        name: 'orderList',
        droppable: true,
        components: [{
          type: 'div',
          attributes: {
            class: 'allDiv',
          },
          components: [{
            type: 'div',
            attributes: {
              class: 'allDiv'
            },
            components: [{
                type: 'div',
                attributes: {
                  class: 'thDiv'
                },
                components: [{
                    type: 'div',
                    content: `<span>订单详情</span>`,
                    attributes: {
                      class: 'headerDiv1'
                    }
                  },
                  {
                    type: 'div',
                    content: '收货人',
                    attributes: {
                      class: 'headerDiv234'
                    }
                  },
                  {
                    type: 'div',
                    content: '金额',
                    attributes: {
                      class: 'headerDiv234'
                    }
                  },
                  {
                    type: 'div',
                    content: '全部状态',
                    attributes: {
                      class: 'headerDiv234'
                    }
                  },
                  {
                    type: 'div',
                    content: '操作',
                    attributes: {
                      class: 'headerDiv5'
                    }
                  },
                ]
              },
              {
                type: 'div',
                attributes: {
                  class: 'listDiv',
                },
              }
            ]
          },
          ]
        }],
        script() {
          var th = document.getElementById(this.id);
          let current = th.getElementsByClassName('listDiv')[0];
          // var setting = prompt("输入订单接口地址:", "");
          var setting = "http://home.i3vsoft.com:1080/shopping-mall-backend/sp/order/listProductOrders";
          let userId = '?userId=ff80808186e9567c01877d725b5d0278'; 
          setting += userId;
          let listItems = [];
          if(setting){
            fetch(setting,{
              method: 'GET',
              headers:{
                'X-SYSTEM': 'saas',
                'X-Access-Token':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOjEsImV4cCI6MTcyNTU0MTYyNCwicGxhdGZvcm0iOjIsInVzZXJuYW1lIjoiMTM1MzUwNDgzOTcifQ.bao09FBDYdub_dluXm47LwpIfakvaL53SiT468O6TY0&username=13535048397&tenantId=ff80808188dd574e0188fa8094cf0259'
              },
            }).then(res => {
              if(res.ok){
                return res.json();
              }
            }).then(data => {
              listItems = data.result.records;
              listItems.forEach(item => {
                const newDiv = document.createElement('div');
                newDiv.innerHTML = `
                  <div style="height:130px;margin:2%;background-color: rgb(240,240,240);">
                    <div style="height: 40px;background-color: rgb(240,240,240);display: flex;align-items: center;border-top: solid 1px rgb(240,240,240);border-left: solid 1px rgb(240,240,240);border-right: solid 1px rgb(240,240,240);">
                      <span style="margin: 0px 10px;">${item.createTime}</span>
                      <span style="margin: 0px 10px;">订单号：${item.id}</span>
                      <span style="margin: 0px 10px;">${item.name}</span>
                    </div>
                    <div style="height: 90px;background-color: white;display: flex;">
                      <div style="border: 1px solid rgb(240,240,240);min-width:35%;display:flex;white-space:nowrap">
                        <div style="display:flex;justify-content:center;align-items:center;margin-left: 3%;">
                          <img style="width: 70px;height: 70px;background-color: lightgray;margin-right:10px;" src=""/>
                        </div>
                        <div style="margin-top: 3%;">
                          <span style="margin-right:10%">${item.orderTitle}</span>
                        </div>
                      </div>
                      <div style="display: flex;justify-content: center;align-items: center;border-right: 1px solid rgb(240,240,240);border-bottom: 1px solid rgb(240,240,240);border-top: 1px solid rgb(240,240,240);min-width:10%;"><span>${item.receiverName}</span></div>
                      <div style="display: flex;justify-content: center;align-items: center;border-right: 1px solid rgb(240,240,240);border-bottom: 1px solid rgb(240,240,240);border-top: 1px solid rgb(240,240,240);min-width:10%;"><span>${item.orderAmount}</span></div>
                      <div style="display: flex;justify-content: center;align-items: center;border-right: 1px solid rgb(240,240,240);border-bottom: 1px solid rgb(240,240,240);border-top: 1px solid rgb(240,240,240);min-width:10%;"><span>${getStatus(item.orderStatus)}</span></div>
                      <div style="display: flex;justify-content: center;align-items: center;border-right: 1px solid rgb(240,240,240);border-bottom: 1px solid rgb(240,240,240);border-top: 1px solid rgb(240,240,240);flex:1">
                        ${generateOperationHtml(getOperation(item.orderStatus))}
                      </div> 
                    </div>
                  </div>
                `
                function generateOperationHtml(operations) {
                  spHtml = ''
                  operations.forEach(op => {
                    spHtml += `<span class="clickable" style="margin-left:10px;">${op.text}</span>`
                  }) 
                  return spHtml;
                }
      
                // newDiv.appendChild(bodyDiv);
                current.appendChild(newDiv);
                function getStatus(status){
                  switch(status){
                    case 1:
                      return '待付款';
                    case 2:
                      return '待发货';
                    case 3:
                      return '待收货';
                    case 4:
                      return '已完成';
                    default:
                      return '未定义'
                  }
                }
              function getOperation(status) {
                const operations = {
                  4: [
                    { text: '', action: () => alert("点击了查看订单按钮") },
                    { text: '查看订单', action: () => alert("点击了查看订单按钮") },
                    { text: '评价晒单', action: () => alert("点击了评价晒单按钮") },
                    { text: '删除', action: () => alert("点击了删除按钮") },
                  ],
                  1: [
                    { text: '', action: () => alert("点击了查看订单按钮") },
                    { text: '付款01:23', action: () => alert("点击了付款按钮") },
                    { text: '查看订单', action: () => alert("点击了查看订单按钮") },
                    { text: '取消订单', action: () => alert("点击了取消订单按钮") },
                  ],
                  2: [
                    { text: '', action: () => alert("点击了查看订单按钮") },
                    { text: '查看详情', action: () => alert("点击了查看详情按钮") },
                    { text: '再次购买', action: () => alert("点击了再次购买按钮") },
                    { text: '取消订单', action: () => alert("点击了取消订单按钮") },
                  ],
                  3: [
                    { text: '', action: () => alert("点击了查看订单按钮") },
                    { text: '确认收货', action: () => alert("点击了确认收货按钮") },
                    { text: '查看详情', action: () => alert("点击了查看详情按钮") },
                    { text: '再次购买', action: () => alert("点击了再次购买按钮") },
                  ],
                  '待评价': [
                    { text: '', action: () => alert("点击了查看订单按钮") },
                    { text: '查看评价', action: () => alert("点击了查看评价按钮") },
                    { text: '申请售后', action: () => alert("点击了申请售后按钮") },
                    { text: '再次购买', action: () => alert("点击了再次购买按钮") },
                  ],
                  '已取消': [
                    { text: '', action: () => alert("点击了查看订单按钮") },
                    { text: '查看详情', action: () => alert("点击了查看详情按钮") },
                    { text: '再次购买', action: () => alert("点击了再次购买按钮") },
                  ]
                };
                return operations[status] || [];
              }
              }) 

              th.getElementsByClassName('listDiv')[0].querySelectorAll('.clickable').forEach(div => {
                div.addEventListener('click', function(event) {  
                    // 这里你可以直接访问被点击的 div  
                    // 如果你需要获取特定的文本或数据，你可以从 event.target 中获取  
                    // 例如：event.target.textContent 或 event.target.getAttribute('data-some-attribute')    
                    btnStatus(event.currentTarget.textContent);
                  });  
              });
            
            
            })
          }
          
        function btnStatus(status){
          alert("点击的是: "+status.trim()+" 按钮")
        }
        },
        styles: `
        .allDiv{
          overflow-y: auto;
        }
        .thDiv{
          height: 40px;
          background-color: rgb(240,240,240);
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 2%;
        }
        .thDiv span{
          text-align: center;
        }
        .icon{
          width: 19px;
          height: 16px
        }
        .headerDiv1{
          min-width: 34%;
          height: 40px;
          display: flex;
          align-items: center;
          margin-left: 1%;
        }
        .headerDiv234{
          min-width: 10%;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .headerDiv5{
          min-width: 25%;
          height: 40px;
          display: flex;
          align-items: center;
          margin-left: 1%;
          flex: 1;
        }
        .listDiv{
          background-color: white;
          overflow-hidden: auto;
          max-height: 90%;
        } 
        .button{
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .button:hover{
          background-color: rgb(242, 242, 242);
          height: 20px;
         
        }
        
        `
      },
    },
    initialize() {
      if (!this.isInitialized) {
        console.log('Initialize called');
        this.isInitialized = true;
        this.set('orderData', orderData);
        this.renderOrderList();
      }
    },
    renderOrderList() {
      const orderData = this.get('orderData');
      console.log('Rendering Order Data:', orderData);
  
      const listDiv = this.el.querySelector('.listDiv');
      if (listDiv && orderData) {
        listDiv.innerHTML = '';
        orderData.forEach(order => {
          const orderItem = document.createElement('div');
          orderItem.className = 'orderItem';
          orderItem.innerHTML = `
            <div class="orderReceiver">${order.receiver}</div>
            <div class="orderAmount">${order.amount}</div>
            <div class="orderStatus">${order.status}</div>
            <div class="orderActions">${order.actions}</div>
          `;
          listDiv.appendChild(orderItem);
        });
      }
    }
  });
  // 注册组件
  editor.BlockManager.add('orderList', {
    label: '订单列表',
    category: '其他类',
    media: `<svg t="1723608089170" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4268" width="35" height="35"><path d="M268.190476 146.285714h48.761905v73.118476L268.190476 219.428571v609.52381h487.619048V219.428571h-48.761905V146.285714h48.761905a73.142857 73.142857 0 0 1 73.142857 73.142857v609.52381a73.142857 73.142857 0 0 1-73.142857 73.142857H268.190476a73.142857 73.142857 0 0 1-73.142857-73.142857V219.428571a73.142857 73.142857 0 0 1 73.142857-73.142857z m292.571429 390.095238v73.142858h-219.428572v-73.142858h219.428572z m121.904762-146.285714v73.142857H341.333333v-73.142857h341.333334zM585.142857 73.142857a73.142857 73.142857 0 0 1 73.142857 73.142857v48.761905a73.142857 73.142857 0 0 1-73.142857 73.142857h-146.285714a73.142857 73.142857 0 0 1-73.142857-73.142857V146.285714a73.142857 73.142857 0 0 1 73.142857-73.142857h146.285714z m0 73.142857h-146.285714v48.761905h146.285714V146.285714z" p-id="4269"></path></svg>`,
    content: {
      type: 'orderList'
    },

  });

}